<template>
	<view class="module flex_ZC">
		<NavTitle :title="title" :backgroundColor='backgroundColor' @leftClick="leftClick"></NavTitle>


		<view class="agreement ">
			<view class="">
				<u-parse :content="merchantAgreement"></u-parse>
			</view>
		</view>
		<view class="empty3"></view>

		<view class="btns flex_ld">
			<view class="service flex_dq">
				<text class="service1" v-if="countDown && touchBottom" @click="$u.debounce(nextStep, 300)">同意协议，开始入驻</text>

				<view class="service2 flex_c" @click="$u.debounce(nextStep, 300)" v-else>
					<text>请仔细阅读协议</text>
					<u-count-down :time="10000" format="ss" @change="onChange"> ({{ timeData.seconds }}) </u-count-down>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		settingrule
	} from "../../api/settled.js"
	export default {
		data() {
			return {
				title: "入驻福叠猫",
				backgroundColor: '',
				baseUrl: this.$imageBaseUrl,
				merchantAgreement: "", //协议
				timeData: {},
				countDown: false, //倒计时
				touchBottom: false, //是否触底

			}
		},
		// 页面滚动
		onPageScroll: function(e) {
			console.log(e);
			const scrollTop = e.scrollTop; // 获取页面滚动位置
			// 根据滚动位置修改状态栏样式
			if (scrollTop > 20) {
				this.backgroundColor = '#ffffff';
			} else {
				this.backgroundColor = '';
			}
		},
		onLoad() {
			this.getrule()
		},
		methods: {
			leftClick() {
				console.log(123)
				//获取页面栈的长度
				const canNavBack = getCurrentPages()
				console.log(canNavBack.length);
				// 判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
				if (canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/index/cloudCatIndex'
					})
				}
			},
			// 入驻权益
			getrule() {
				settingrule().then(res => {
					if (res.code == 1) {
						this.merchantAgreement = res.data.agreement.settled_agreement
					}
				})
			},
			// 协议倒计时
			onChange(e) {
				this.timeData = e
				if (e.seconds == 0) {
					this.countDown = true
				}
			},
			// 下一步
			nextStep() {
				if (this.countDown && this.touchBottom) {
					uni.navigateTo({
						url: '/pageYm/ymJoin/chooseAStore'
					})
				} else {
					uni.$u.toast('请滑动阅读协议~')
				}

			}
		},
		//触底加载
		onReachBottom() {
			console.log('触底加载');
			this.touchBottom = true
		},

	}
</script>

<style scoped>
	.module {
		width: 750rpx;
		margin: 0 auto;
	}






	.agreement {
		width: 686rpx;
		border-radius: 14rpx;
		margin-top: 40 rpx;
		color: #666666;
	}

	.agreement>text {
		margin: 40rpx 0 20rpx;
	}

	.agreement_box {
		width: 638rpx;
		height: 124rpx;
	}

	.btns {
		position: fixed;
		bottom: 0rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 690rpx;
		height: 150rpx;
		background: #f8f8f8;
	}

	.service1 {
		width: 686rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 32rpx;
		color: #333333;
		font-weight: 500;
		text-align: center;
		background: #FFCC28;
		border-radius: 20rpx;
	}

	.service2 {
		width: 686rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 32rpx;
		color: #ffffff;
		font-weight: 500;
		text-align: center;
		background: #CBCBCB;
		border-radius: 20rpx;
	}
</style>